<template>
  <div class="tiktok-detail section" :class="{ 'w375': fun.isPc() }" v-if="show_page">
    <div id="navTab" :class="{ hoet: hoet }">
      <a class="nav1" :class="{ current: currentClass == 0 }" @click.stop="jump(0)">
        {{ isTimeAppiont?
        `${appointmentLang.service}` : '商品'
        }}
      </a>
      <a class="nav1" :class="{ current: currentClass == 1 }" @click.stop="jump(1)">详情</a>
    </div>
    <div id="hoid" :class="{ hoet: hoet, 'w375': fun.isPc() }">
      <div class="back" @click="goto" :class="{ hoet: hoet }">
        <i class="iconfont icon-member-left"></i>
      </div>
      <div class="back" @click="gotoMember" :class="{ hoet: hoet }">
        <i class="iconfont icon-wode-wode"></i>
      </div>
    </div>
    <GoodsSwiper :thumb_url="detail.imgs || []" />

    <div class="tiktok-cps">
      <div style="display: flex; margin-bottom: 0.5rem;">
        <span style="color: #ff6238; font-size: 1.125rem;">{{ $i18n.t('money') }}{{ detail.coupon_price }}</span>
      </div>
      <div class="tiktok-cps-title">
        <span class="tiktok-tips">抖音</span>
        <span>{{ detail.title }}</span>
      </div>
      <div class="tiktok-cps-sell-good">
        <div class="tiktok-person">
          <img src="../../../assets/images/TikTok/jieti.png" style="width: 100%; height: 100%;" />
        </div>
        <div style="color: #999;">{{ detail.kol_num }}位达人带货</div>
      </div>
      <div class="tiktok-goods-info">
        <span>月销{{ detail.month_sales }}</span>
        <span>总销量{{ detail.sales }}</span>
      </div>
    </div>
    <!--单单有喜-->
    <goods-label :everyOrder="detail.every_order_reward" v-if="detail.every_order_reward"></goods-label>

    <div class="item">{{ detail.shop_name }}</div>

    <!--群活码-->
    <div class="group-code" v-if="detail.group_code && detail.group_code.goods_entrance == 1">
      <div class="group-code-face" v-if="detail.group_code.code_logo">
        <img :src="detail.group_code.code_logo" />
      </div>
      <div class="group-code-content">
        <div class="group-code-name">{{ detail.group_code.code_title }}邀请您添加专属福利群！</div>
        <div class="group-code-desc">{{ detail.group_code.citation_copy }}</div>
      </div>
      <div class="group-code-button" @click="toGroupCode">去加群</div>
    </div>



    <div class="section">
      <p class="good-detail">
        <span class="left-line"></span>
        商品详情
        <span class="right-line"></span>
      </p>
      <img v-for="item in detail.imgs" style="width: 100%; display: block;" :src="item" alt />
    </div>

    <div style="width: 375px; top: 450px; position: fixed;">
      <div class="poster" @click="postShow">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/bc_eweima.png" alt />
      </div>
    </div>

    <div class="foot" :class="{ 'w375 foot_pc': fun.isPc() }">
      <van-goods-action-icon icon="shop-o" text="首页" @click="gotoHome" />
      <van-goods-action-icon icon="chat-o" text="客服" @click="clickChat" />
      <div style="display: flex; justify-content: space-evenly; flex: 1; color: #fff; text-align: center;">
        <template v-if="dy_password && dy_deeplink">
          <div @click="ShowTiktokPoupup" class="button" style="opacity: 0.5;">
            <template v-if="detail.share_reward">
              <template v-if="detail.share_reward_type !== 'commission'">
                <div>分享赚</div>
                <div>{{ detail.share_reward }}</div>
              </template>
              <template v-else>
                <div style="padding: 0.6rem 0;">分享赚{{ detail.share_reward }}</div>
              </template>
            </template>
            <template v-else>
              <div style="padding: 0.5rem 0;">分享</div>
            </template>
          </div>
          <div class="button" @click="toTikTok">
            <template v-if="detail.order_reward">
              <template v-if="detail.order_reward_type !== 'balance'">
                <div>下单送</div>
                <div>{{ detail.order_reward }}</div>
              </template>
              <template v-else>
                <div style="padding: 0.6rem 0;">下单送{{ detail.order_reward }}</div>
              </template>
            </template>
            <template v-else>
              <div style="padding: 0.5rem 0;">下单</div>
            </template>
          </div>
        </template>
        <template v-else>
          <div class="button" style="background: rgb(212, 212, 212) !important;">
            <template v-if="detail.share_reward">
              <template v-if="detail.share_reward_type !== 'commission'">
                <div>分享赚</div>
                <div>{{ detail.share_reward }}</div>
              </template>
              <template v-else>
                <div style="padding: 0.6rem 0;">分享赚{{ detail.share_reward }}</div>
              </template>
            </template>
            <template v-else>
              <div style="padding: 0.5rem 0;">分享</div>
            </template>
          </div>
          <div class="button" style="background: rgb(212, 212, 212) !important;">
            <template v-if="detail.order_reward">
              <template v-if="detail.order_reward_type !== 'balance'">
                <div>下单送</div>
                <div>{{ detail.order_reward }}</div>
              </template>
              <template v-else>
                <div style="padding: 0.6rem 0;">下单送{{ detail.order_reward }}</div>
              </template>
            </template>
            <template v-else>
              <div style="padding: 0.5rem 0;">下单</div>
            </template>
          </div>
        </template>
      </div>
    </div>

    <van-popup v-model="tiktok_popup" @close="closeTap" position="bottom" round :style="{ height: '18%' }">
      <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-around;">
        <div @click="show_popup" style="display: flex; flex-direction: column;">
          <img style="width: 2.7188rem; height: 2.7188rem;" src="../../../assets/images/TikTok/link_copy.png" alt />
          <span>复制抖口令</span>
        </div>
        <div style="display: flex; flex-direction: column;" @click="postShow">
          <img style="width: 2.7188rem; height: 2.7188rem;" src="../../../assets/images/TikTok/poster.png" alt />
          <span>海报</span>
        </div>
      </div>
    </van-popup>

    <van-overlay :show="show_dy_popup" @click="show_dy_popup = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="detail">
            <div class="flex">
              <img :src="detail.imgs && detail.imgs[0]" style="width: 2.75rem; height: 2.75rem; border-radius: 0.125rem;"
                alt />
              <span class="name" style="margin-left: 0.25rem; margin-right: 1.2rem; text-align: left;">{{
                detail.title
              }}</span>
            </div>
          </div>
          <div class="close" @click="show_dy_popup = false">
            <van-icon name="cross" />
          </div>
          <p class="link_dy">{{ dy_password }}</p>
          <div style="position: relative; bottom: 5%; left: 0; right: 0;" v-clipboard:copy="dy_password"
            v-clipboard:success="onCopy" v-clipboard:error="onError">
            <van-button style="width: 100%; border: none;" color="#F42121">一键复制，打开抖音APP下单</van-button>
          </div>
        </div>
      </div>
    </van-overlay>

    <!-- 海报 -->
    <yz-goodsposter v-model="posterShow" :posterData="isFrontCanvas ? posterImg : {}"
      :defaultImg="!isFrontCanvas ? posterImg : ''" plugin_name="tiktok" :goodstype="true"></yz-goodsposter>
    <!-- 客服 -->
    <cservice-popup :show="isShowChat" :cservice="cservice" :service_mobile="service_mobile"
      :service_QRcode="service_QRcode" @close="isShowChat = false"></cservice-popup>
  </div>
</template>

<script>
import GoodsSwiper from "../../../components/goods/children/goods_swiper";
import cservicePopup from "/src/components/goods/children/plugin/cservicePopup"; //客服组件
import goodsLabel from "../../../components/goods/children/goodsLabel"; //单单有喜组件
import { tabScroll } from "/src/components/goods/children/mixin/tabScroll";
import { Toast } from "vant";
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
export default {
  components: { GoodsSwiper, yzGoodsposter, cservicePopup,goodsLabel },
  mixins: [tabScroll], //计算顶部导航
  data() {
    return {
      show_dy_popup: false,

      copy_err: false,
      hoet: false,
      dy_password: "",
      goods_id: "",
      detail: {},
      currentClass: 0,
      showPageB: false,
      scroll: "",

      cservice: "",
      service_mobile: "",
      service_QRcode: "",

      dy_deeplink: "",
      show_page: false,

      is_handleScroll: 0, // 计算保存页面高度
      isShowChat: false,
      tiktok_popup: false,
      posterShow: false,
      posterImg: null,
      isFrontCanvas: true //是否前端控制生成海报，false为后端生成
    };
  },
  deactivated() {
    window.removeEventListener("scroll", this.throttleFn);
  },
  activated() {
    this.dy_deeplink = "";
    this.goods_id = this.$route.params.id;
    this.copy_err = false;
    this.show_page = false;
    this.getData();

    this.handleScroll();
  },
  methods: {
    toTikTok() {
      if (this.fun.isCPS()) {
        let json = { dy_deeplink: this.dy_deeplink };
        if (this.fun.isIosOrAndroid() === "ios") {
          IOStoTikTok(JSON.stringify(json))
        } else {
          androidToTikTok(this.dy_deeplink)
        }
      } else {
        this.show_dy_popup = true
      }
    },
    show_popup() {
      this.show_dy_popup = true;
      this.tiktok_popup = false;
    },
    // 监听滚动条
    handleScroll() {
      window.addEventListener("scroll", this.windowScroll);
      this.$nextTick(() => {
        document.documentElement.scrollTop = 0;
      });
    },
    windowScroll() {
      let scroll = document.documentElement && document.documentElement.scrollTop;
      this.is_handleScroll = scroll;
      this.scroll = scroll;
    },
    getDetailData(index, tag) {
      // 商品详情处理
      if (tag) {
        this.$nextTick(() => {
          let jump = document.getElementsByClassName("section");
          console.log(jump);
          setTimeout(() => {
            // 获取需要滚动的距离
            let total = jump[index].offsetTop - 50;
            // Chrome
            document.body.scrollTop = total;
            // Firefox
            document.documentElement.scrollTop = total;
            // Safari
            window.pageYOffset = total;
          }, 200);
        });
      }
    },
    slider() {
      let that = this;
      window.onscroll = function () {
        var top = document.documentElement.scrollTop || document.body.scrollTop;

        that.hoet = top <= 40 ? false : true;
        that.btnFlag = top > 120 ? true : false;

        //滑动到底部禁止反弹
        if (document.documentElement.scrollHeight == document.documentElement.clientHeight + top) {
          //alert("Touch_Buttom!");
          document.addEventListener("touchstart", this.move, false);
          document.addEventListener("touchmove", this.move, false);
        }
      };
    },
    // 群活码跳转
    toGroupCode() {
      if (this.detail.group_code.jump_mode === "home") {
        this.$router.push(this.fun.getUrl("groupCode"));
      } else if (this.detail.group_code.code_url) {
        window.location.href = this.detail.group_code.code_url;
      }
    },
    onCopy(e) {
      Toast({
        message: "口令已复制，打开抖音app下单！",
        position: "bottom",
        duration: 1000
      });
      this.show_dy_popup = false;
      this.tiktok_popup = false;
    },
    onError(e) {
      this.copy_err = true;
      if (this.detail.detail_url) {
        this.getTikTokCps(this.detail.detail_url);
      }
    },
    getTikTokCps(detail_url) {
      if (detail_url == "") {
        return;
      }
      $http.get("plugin.tiktok-cps.api.goods.tranfer-link", { detail_url }, 'loading').then(res => {
        if (res.result == 0) {
          this.dy_password = '';
          this.dy_deeplink = '';
          this.show_page = true;
          return
        }
        this.show_page = true;
        this.dy_password = res.data.dy_password;
        this.dy_deeplink = res.data.dy_deeplink;
        if (this.copy_err) {
          this.onCopy();
        }
      });
    },
    postShow() {
      if (!this.fun.isTextEmpty(this.posterImg)) {
        this.posterShow = true;
      } else {
        let toastPoster = Toast({
          duration: -1, // 持续展示 toast
          message: "正在为您生成海报中"
        });
        let url = "";
        let Jons = {};
        this.isFrontCanvas = false;
        this.isFrontCanvas = true;
        url = "plugin.tiktok-cps.api.poster.get-poster";

        Jons.id = this.$route.params.id;
        $http
          .get(url, Jons, "")
          .then(response => {
            toastPoster.clear();
            if (response.result == 1) {
              // isFrontCanvas 是否需要前端生成海报
              this.posterImg = this.isFrontCanvas ? response.data : `${response.data.image_url}?${Date.now()}`;
              this.posterShow = true;
            } else {
              this.posterShow = false;
              this.$dialog.alert({ message: response.msg });
            }
          })
          .catch(error => {
            toastPoster.clear();
            console.log(error);
          });
      }
    },
    ShowTiktokPoupup() {
      this.tiktok_popup = true;
    },
    closeTap() {
      this.tiktok_popup = false;
    },
    clickChat() {
      let setServicePlugin = this.fun.isTextEmpty(this.service_mobile) && this.fun.isTextEmpty(this.service_QRcode);
      if (this.fun.isTextEmpty(this.cservice) && setServicePlugin) {
        return this.$toast("抱歉，暂未设置客服信息");
      }
      if (!this.fun.isTextEmpty(this.cservice) && setServicePlugin) {
        //只设置了客服链接，直接跳转
        if (this.cservice && this.cservice.indexOf("chatWindow") >= 0) {
          window.location.href = this.cservice + "&goods_id=" + this.goods_id;
        } else {
          window.location.href = this.cservice;
        }
        return;
      }
      this.isShowChat = true;

    },
    gotoHome() {
      this.$router.push(this.fun.getUrl("TikTokCps", {}));
    },
    gotoMember() {
      this.$router.push(this.fun.getUrl("member", {}));
    },
    goto() {
      this.$router.go(-1);
    },
    async getData() {
      let { result, msg, data } = await $http.get("plugin.tiktok-cps.api.goods.good-detail", { goods_id: this.goods_id });
      if (result == 0) {
        return this.$toast(msg);
      }
      this.detail = data || {};
      if (data.cservice) {
        this.cservice = data.cservice.cservice;
        this.service_mobile = data.cservice.service_mobile;
        this.service_QRcode = data.cservice.service_QRcode;
      }
      this.slider();
      this.getTikTokCps(data.detail_url);
    }
  },
  watch: {
    is_handleScroll() {
      this.loadSroll();
    }
  }
};
</script>

<style lang='scss'>
.w375 {
  width: 375px !important;
}

.button {
  flex: 1;
  padding: 0.4063rem 0;
  background: #ff6238;
  flex-shrink: 0;
}

.link_dy {
  margin-top: 1.0625rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  word-break: break-all;
  text-align: left;
  color: #999;
  font-size: 0.75rem;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.close {
  position: absolute;
  right: 5%;
  top: 5%;
}

.block {
  position: relative;
  width: 17.5rem;
  border-radius: 0.25rem;
  background-color: #fff;
  padding: 1.25rem 0.625rem;
}

.foot_pc {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.tiktok-detail {
  padding-bottom: 5rem;
  overflow: hidden;

  #navTab.hoet {
    display: flex;
    justify-content: space-around;
  }

  #navTab {
    position: fixed;
    z-index: 999;
    width: 14rem;
    left: 50%;
    margin-left: -7rem;
    display: none;
    background: #fdfdfd;

    a {
      padding: 0 0.8rem;
      height: 2.25rem;
      line-height: 2.25rem;
    }

    .current {
      color: #1f1f1f;
      font-weight: bold;
      border-bottom: 0.1875rem solid #f15353;
    }
  }

  .hoet {
    background-color: rgba(253, 253, 253, 1) !important;
    color: #1f1f1f !important;
  }

  .poster {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 20.4rem;
    top: 65%;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .good-detail {
    text-align: center;
    background: #fff;
    font-size: 0.875rem;
    padding: 0.625rem 0;
    position: relative;

    .left-line {
      position: absolute;
      width: 3.125rem;
      height: 1px;
      background: #ccc;
      top: 50%;
      left: 20%;
    }

    .right-line {
      position: absolute;
      width: 3.125rem;
      height: 1px;
      background: #ccc;
      top: 50%;
      right: 20%;
    }
  }

  .tiktok-person {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.5rem;
  }

  .group_code {
    width: 100%;
    background: #fff;
    padding: 0.625rem;
  }

  .item {
    background: #fff;
    text-align: left;
    border-radius: 0.3125rem;
    padding: 0.6rem;
    margin: 0.6rem;
  }

  .tiktok-cps {
    margin: 0.6rem;
    border-radius: 0.3125rem;
    padding: 0.6rem;
    background-color: #fff;

    .tiktok-tips {
      background-color: #000;
      color: #fff;
      border-radius: 0.3125rem;
      padding: 0.0938rem 0.25rem;
      font-size: 0.75rem;
      margin-right: 0.1875rem;
    }

    .tiktok-cps-title {
      text-align: left;
    }

    .tiktok-goods-info {
      margin-top: 0.75rem;
      display: flex;
      justify-content: space-between;
    }

    .tiktok-cps-sell-good {
      margin: 0.75rem 0;
      padding: 0.25rem 0.5rem;
      width: 100%;
      border-radius: 0.25rem;
      background: #f6f6f6;
      display: flex;
      align-items: center;
    }
  }

  .foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    background: #fff;
    align-items: center;
  }

  #member {
    padding: 0.3125rem;
    width: 1.6rem;
    position: fixed;
    z-index: 2;
    box-sizing: content-box;
    right: 0;
  }

  #hoid {
    padding: 0.3125rem;
    width: 100%;
    position: fixed;
    z-index: 2;
    display: flex;
    justify-content: space-between;
  }

  .back {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 100%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.4);
    text-indent: 0;
    line-height: 1.7rem;
    overflow: hidden;
  }

  /* 群活码 */
  .group-code {
    display: flex;
    align-items: center;
    text-align: left;
    background-color: #fff;
    padding: 0.6rem;
    border-radius: 0.3125rem;
    margin: 0.6rem;

    .group-code-face {
      width: 2.5rem;
      height: 2.5rem;

      img {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
      }
    }

    .group-code-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 2rem;
      padding-right: 1rem;
      padding-left: 0.5rem;
      line-height: 1.125rem;

      .group-code-name {
        font-size: 13px;
        font-weight: bold;
        color: #353535;
      }

      .group-code-desc {
        font-size: 10px;
        color: #6c6c6c;
      }
    }

    .group-code-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.75rem;
      height: 1.5rem;
      line-height: 1.5rem;
      color: #fff;
      font-size: 12px;
      font-weight: bold;
      background-color: #ff9600;
      border-radius: 0.75rem;
    }
  }
}
</style>